<!DOCTYPE html>
<html lang="en">
  <head>
    <title>TV corner table</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        color: #fff;
        margin: 0px;
        overflow: hidden;
      }
      #info {
        color: #fff;
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 100;
        display:block;
      }
      #info a, .button { color: #00f; font-weight: bold; text-decoration: underline; cursor: pointer }
    </style>
  </head>

  <body>
    <div id="info">3D model of a TV corner table. Follow 
    <a href="http://flux242.blogspot.com/2012/10/design-of-corner-tv-table.html" target="_blank">this link</a>
    to get full project description
    </div>

    <script src="three.min.js"></script>
    <script src="ColladaLoader.js"></script>
    <script src="Detector.js"></script>

    <script>

      if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

      var container, stats;
      var camera, controls, scene, renderer;
      var cross;
      var dae;

      init();
      animate();

      function init() {

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
        camera.position.z = 40.2;

        controls = new THREE.TrackballControls( camera );

        controls.rotateSpeed = 5.0;
        controls.zoomSpeed = 2;
        controls.panSpeed = 2;

        controls.noZoom = false;
        controls.noPan = false;

        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;

        scene = new THREE.Scene();

        scene.add( camera );

        // light
        var dirLight = new THREE.DirectionalLight( 0xffffff );
        dirLight.position.set( 200, 200, 1000 ).normalize();

        camera.add( dirLight );
        camera.add( dirLight.target );
        scene.add( new THREE.AmbientLight( 0x4c4c4c ) );

        // collada model
        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load( './table_3d.dae', function ( collada ) {
          dae = collada.scene;
          scene.add( dae );
        } );

        // renderer
        renderer = new THREE.WebGLRenderer( { antialias: false } );
        renderer.setClearColorHex( 0xa0a0a0, 1 );
        renderer.setSize( window.innerWidth, window.innerHeight );

        container = document.createElement( 'div' );
        document.body.appendChild( container );
        container.appendChild( renderer.domElement );

        window.addEventListener( 'resize', onWindowResize, false );
      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        controls.handleResize();
      }

      function animate() {

        requestAnimationFrame( animate );

        controls.update();
        renderer.render( scene, camera );

        stats.update();
      }

    </script>

  </body>
</html>
